<template>
  <div class="questions_page">

    <!-- 导航 开始 -->
    <nav-bar title="社区问答"></nav-bar>
    <!-- 导航 end -->

    <!-- 搜索框 开始 -->
    <div class="search_box">
      <!-- <img src="@/assets/images/search.png" class="icon" alt="">
      <div class="input_box">
        <input type="text" v-model="term" class="a_input" placeholder="牙齿矫正哪里好">
      </div> -->
      <van-search v-model="term" class="van_search" shape="round" placeholder="牙齿矫正哪里好" @search="onSearch" />
    </div>
    <!-- 搜索框 end -->

    <!-- 热门关键词 开始 -->
    <div class="hot_word" v-if="hotWords && hotWords.length">
      <h2 class="h2_title">热门搜索</h2>
      <div class="word_list">
        <div class="word" v-for="(item, index) in hotWords" :key="index">{{ item }}</div>
        <!-- <div class="word hot">种植牙价格</div>
        <div class="word">深圳牙齿矫正</div>
        <div class="word">矫正医生</div>
        <div class="word">深圳隐形矫正</div>
        <div class="word">隐适美</div>
        <div class="word">矫正价格</div> -->
      </div>
    </div>
    <!-- 热门关键词 end -->

    <!-- 最新问题 开始 -->
    <div class="new_question">
      <h2 class="h2_title">最新问题</h2>
      <div class="list_box">
        <Question v-for="(item, index) in questionList" :key="index" :info="item"></Question>
      </div>
    </div>
    <!-- 最新问题 end -->

    <!-- 悬浮按钮 开始 -->
    <div class="fixed_icon" @click="addQuestion">
      <img src="@/assets/images/question/add.png" alt="">
    </div>
    <!-- 悬浮按钮 end -->

    <!-- 弹框 开始 -->
    <div class="li_popup" v-show="showPopup">
      <div class="blk"></div>
      <div class="li_popup_content">
        <div class="image_box">
          <img src="@/assets/images/question/chahua.png" alt="">
        </div>
        <div class="content">
          <p>功能正在升级中</p>
          <p>敬请期待!</p>
          <button class="btn" @click="closeDialog">我知道了</button>
        </div>
      </div>
    </div>
    <!-- 弹框 end -->


  </div>
</template>
<script>
import { Search } from "vant";
import Question from "@/components/question/index.vue";
import { PLATFORM_TYPE,GET_QUESTIONANSWER_SEARCH, GET_KEYWORDS_OPTIONS,GET_SEO_SETTING_INFO } from "@/http/interface";
export default {
  components: {
    [Search.name]: Search,
    Question,
  },
  data() {
    return {
      questionList: [],
      hotWords: [],
      showPopup: false,
      term: '',
      seoInfo:{}
    };
  },
  watch: {
    questionList: {
      handler: function (n) {
        this.questionList = n || []
      },
      immediate: true
    }
  },
  head() {
    return {
      title: this.seoInfo.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.seoInfo.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.seoInfo.keywords,
        },
      ],
      link:[
        {ref:'canonical',href:`${this.$domain}/questions/list`}
      ]
    };
  },
  watchQuery: true,
  async asyncData({ query, $axios }) {
    let oParams = { pageNumber: 1, pageSize: 10000 };
    if (query.term) {
      oParams.term = query.term;
    }

    // 列表
    let res = await $axios.get(GET_QUESTIONANSWER_SEARCH, { params: oParams });
    let obj = res.data || {};
    let questionList = obj.list || [];

    // 热门关键词
    let wes = await $axios.get(GET_KEYWORDS_OPTIONS, { params: { type: 5 } })
    console.log(wes)
    let hotWords = wes.data || []

    // 获取seo配置
    let seo = await $axios.get(GET_SEO_SETTING_INFO, {
      params: { type: 8, platform: PLATFORM_TYPE },
    });
    let seoInfo = seo.data || {};

    return { questionList, hotWords, term: query.term,seoInfo };
  },
  methods: {
    addQuestion() {
      this.showPopup = true
      // this.$router.push({
      //   path: "/questions/add",
      // });
    },

    // 关闭弹框
    closeDialog() {
      this.showPopup = false
    },

    // 搜索
    onSearch(e) {
      console.log(e)
      this.$router.replace({
        path: '/questions/list',
        query: { term: e }
      })
    }

  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/questions/list.less";
</style>